<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>一键开播 · Geek Mode</title>
    <!-- 本地 flv.js；如用 CDN 可换成 https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js -->
    <script src="./node_modules/flv.js/dist/flv.min.js"></script>
    <style>
        :root {
            --bg: #0d1117;
            --card: #161b22;
            --primary: #39ff14;
            --danger: #ff073a;
            --text: #c9d1d9;
            --font: 'Fira Code', 'Consolas', monospace;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0
        }

        body {
            background: var(--bg);
            color: var(--text);
            font-family: var(--font);
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            padding: 20px;
        }

        .card {
            background: var(--card);
            border: 1px solid #30363d;
            border-radius: 12px;
            padding: 32px 40px;
            width: 100%;
            max-width: 720px;
            box-shadow: 0 0 20px rgba(57, 255, 20, .15);
        }

        h1 {
            text-align: center;
            font-size: 1.4rem;
            margin-bottom: 26px;
            color: var(--primary);
            letter-spacing: .1em;
        }

        .code-block {
            font-size: .9rem;
            background: #0d1117;
            padding: 12px 16px;
            border-left: 3px solid var(--primary);
            border-radius: 4px;
            margin: 12px 0;
            word-break: break-all;
            overflow-x: auto;
            color: #adbac7;
        }

        #video {
            display: none;
            width: 100%;
            aspect-ratio: 16/9;
            background: #000;
            border-radius: 6px;
            margin-bottom: 20px;
            box-shadow: 0 0 12px rgba(57, 255, 20, .25);
        }

        .btn-row {
            display: flex;
            gap: 14px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .btn {
            font-family: var(--font);
            font-size: 1rem;
            padding: 12px 28px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: .25s;
            color: #000;
            font-weight: 600;
            letter-spacing: .05em;
        }

        .btn.primary {
            background: var(--primary);
            box-shadow: 0 0 8px var(--primary);
        }

        .btn.primary:hover {
            filter: brightness(1.2)
        }

        .btn.danger {
            background: var(--danger);
            box-shadow: 0 0 8px var(--danger);
        }

        .btn.danger:hover {
            filter: brightness(1.2)
        }

        @media(max-width:600px) {
            .card {
                padding: 20px
            }

            .btn {
                font-size: .9rem;
                padding: 10px 20px
            }
        }
    </style>
</head>

<body>
    <div class="card">
        <h1>一键开播 · Geek Mode</h1>

        <video id="video" controls muted></video>

        <div id="info"></div>

        <div class="btn-row">
            <button id="startBtn" class="btn primary">开直播</button>
            <button id="watchBtn" class="btn primary" style="display:none;">查看直播</button>
            <button id="closeBtn" class="btn danger" style="display:none;">关闭直播</button>
        </div>
    </div>

    <script>
        /* 配置区：把下面两个地址换成你的真实接口 */
        const API_START = 'http://192.168.124.144:3100/start-live';
        const API_STOP = 'http://192.168.124.144:3100/stop-live?streamKey=';

        let flvUrl = '';

        const $ = sel => document.querySelector(sel);
        const info = $('#info');
        const video = $('#video');

        $('#startBtn').onclick = async () => {
            info.innerHTML = '<span style="color:#39ff14">正在启动推流服务…</span>';
            try {
                const res = await fetch(API_START);
                if (!res.ok) throw new Error('网络异常');
                const data = await res.json();
                flvUrl = data.flvUrl;
                window._streamKey = data.streamKey;

                info.innerHTML = `
                    <div class="code-block">推流地址 (RTMP):<br>${data.rtmpUrl}</div>
                    <div class="code-block">播放地址 (FLV):<br>${data.flvUrl}</div>
                `;
                $('#watchBtn').style.display = '';
                $('#closeBtn').style.display = '';
            } catch (err) {
                info.innerHTML = `<span style="color:#ff073a">启动失败：${err.message}</span>`;
            }
        };

        $('#watchBtn').onclick = () => {
            if (!flvjs.isSupported()) {
                alert('当前浏览器不支持 flv.js'); return;
            }
            video.style.display = 'block';
            const player = flvjs.createPlayer({ type: 'flv', url: flvUrl });
            player.attachMediaElement(video);
            player.load();
            player.play();
            window._flvPlayer = player;
        };

        $('#closeBtn').onclick = async () => {
            if (!window._streamKey) return;
            try {
                await fetch(API_STOP + window._streamKey);
                info.innerHTML = '<span style="color:#39ff14">直播已关闭</span>';
                $('#closeBtn').style.display = 'none';
                $('#watchBtn').style.display = 'none';
                if (window._flvPlayer) {
                    window._flvPlayer.unload();
                    window._flvPlayer.detachMediaElement();
                    window._flvPlayer.destroy();
                    window._flvPlayer = null;
                }
            } catch (err) {
                info.innerHTML = `<span style="color:#ff073a">关闭失败：${err.message}</span>`;
            }
        };
    </script>
</body>

</html>